<template>
  <div class="box">
    <div class="header">购物车</div>
    <div class="main">
      <div class="nothing" v-if="empty">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="购物车为空"
        />
      </div>
      <div class="hasthing" v-else>
        <van-swipe-cell
          v-for="(item, index) in cartList"
          :key="index"
          :name="item.cartid"
          :before-close="beforeClose"
        >
          <van-checkbox
            v-model="item.flag"
            @click="selectOne(item.cartid, item.flag)"
            ></van-checkbox
          >
          <van-card
            :price="item.originprice"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #num>
              <van-stepper
                v-model="item.num"
                theme="round"
                button-size="22"
                disable-input
                
                @change="updateNum(item.cartid, item.num)"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>

        <van-submit-bar :price="priceSum" button-text="提交订单">
          <van-checkbox v-model="isAll">全选</van-checkbox>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Empty,
  Card,
  Stepper,
  SwipeCell,
  Checkbox,
  CheckboxGroup,
  Dialog,
  SubmitBar,
} from "vant";

Vue.use(SubmitBar);
Vue.use(Card);
Vue.use(Empty);
Vue.use(Dialog);
Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import {
  doCartList,
  doUpdateNum,
  doDeleteOne,
  doSelectAll,
  doSelectOne,
} from "../api/cart";
export default {
  name: "Cart",
  components: {},
  data() {
    return {
      empty: true,
      cartList: [],
    };
  },
  created() {
    // 判断用户是否登陆
    if (localStorage.getItem("token")) {
      this.getCartList();
    } else {
      //  去到登陆页
      this.$router.push("/login");
    }
  },

  methods: {
    updateNum(cartid, num) {
      console.log(cartid, num);
      // 调用 增加数量的接口
      doUpdateNum({ cartid, num }).then((res) => {
        console.log(res);
        this.getCartList();
      });
    },

    getCartList() {
      // 发送 获取购物车的请求
      doCartList({ userid: localStorage.getItem("userid") }).then((res) => {
        // console.log(res.data.code);
        if (res.data.code == "10020") {
          // 没有数据
          this.empty = true;
        } else {
          // 有数据
          this.empty = false;
          this.cartList = res.data.data;
        }
      });
    },

    beforeClose({ name, position, instance }) {
      console.log(name, position, instance);
      switch (position) {
        case "right":
          Dialog.confirm({
            message: "确定删除吗？",
          })
            .then(() => {
              // 点击了确定删除就在执行这里
              doDeleteOne({ cartid: name }).then((res) => {
                console.log(res);
                if (res.data.code == "200") {
                  this.getCartList();
                }
              });
              instance.close();
            })
            .catch(() => {
              instance.close();
            });
          break;
      }
    },

    selectOne(cartid, flag) {
      doSelectOne({ cartid: cartid, flag: flag }).then((res) => {
        console.log(res);
      });
    },
  },

  computed: {
    //getter方法决定了 isAll 是上面全部选中 isAll结果就是true，  有一个是false，isAll就是false
    isAll: {
      set(val) {
        // console.log(val);
        this.cartList.forEach((item) => (item.flag = val));
        doSelectAll({ userid: localStorage.getItem("userid"), type: val }).then(
          (res) => {
            console.log(res);
          }
        );
      },
      get() {
        return this.cartList.every((item) => item.flag == true);
      },
    },
    priceSum: {
      get() {
        const newCartList = this.cartList.filter((item) => item.flag);
        return newCartList.reduce((sum, item) => {
          return (sum += item.originprice * item.num * 100);
        }, 0);
      },
    },
  },
};
</script>

<style scoped>
.delete-button {
  height: 100%;
}
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: #fff;
}
::v-deep .van-checkbox {
  width: .8rem;
}
::v-deep .van-card {
  flex: 1;
  background-color: #fff;
}

.van-submit-bar {
  bottom: 50px;
}
</style>